<template>
	<view class="control">
		<nav-bar title="工单报修" :color="navBarColor" :bg="navBarBg" />
		<view class="my-repair flex-space-between">
			<view>
				<view class="flex-align">
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/311c17d6cdf1f2d24c569cc44d67b5195580a99c.png" />
					<text class="title">点拖维修机构</text>
				</view>
				<view class="flex-align name">
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ca6fa32a33e97e7d78fded9cf0adb5fc7a4ed8bf.png" />
					<text class="name-text">张师傅</text>
				</view>
			</view>
			<view class="btn">我要报修</view>
		</view>
		<view class="hr">
			报修记录
		</view>
		<view class="list">
			<view class="item" @click="href" v-for="item in 6" :key="item">
				<view>
					<view class="title-1">常州新北健身广场</view>
					<view class="title-2">报修类型：器材损坏</view>
				</view>
				<view class="flex-space-between bottom">
					<view>器材编号：155955454854</view>
					<view>报修人：张萌</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: 'white'
		})],
		data() {
			return {

			}
		},
		methods: {
			href(){
				uni.navigateTo({
					url:'/page_admin/my-repair/repair-detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d8948f2220ae26cfb802c54e37111b347d606329.jpeg");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 0 26rpx;
		box-sizing: border-box;

		.my-repair {
			background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3513a541728935a07ee88e30c1380500ab04a518.png");
			background-size: 100% auto;
			padding: 38rpx 35rpx 41rpx 42rpx;
			background-repeat: no-repeat;
			margin-top: 290rpx;

			image {
				width: 32rpx;
				height: 34rpx;
				margin-right: 22rpx;
			}

			.title {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 700;
			}

			.name {
				margin-top: 24rpx;
				color: rgb(102, 102, 102);
				font-size: 28rpx;

				image {
					height: 27rpx;
				}
			}

			.btn {
				padding: 18rpx 30rpx;
				color: rgb(255, 255, 255);
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 700;
				background-image: linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(107, 157, 251) 100%);
				border-radius: 60rpx;
			}
		}

		.hr {
			margin-top: 30rpx;
			padding: 0 4rpx;
			padding-left: 26rpx;
			color: rgb(51, 51, 51);
			border-left: 6rpx solid rgb(47, 117, 250);
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.list {
			margin-top: 20rpx;
			.item {
				padding: 20rpx 19rpx 19rpx 21rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 13rpx 57rpx rgba(8, 73, 162, 0.11);
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.title-1 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
				}

				.title-2 {
					margin-top: 10rpx;
					color: rgb(51, 51, 51);
					font-size: 26rpx;
				}

				.bottom {
					color: rgb(153, 153, 153);
					margin-top: 57rpx;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
